<template>
	<view>
		<view class="card" :style="{ backgroundColor: this.color }">
			<view class="task_container">
				<button class="finish_button" 
					type="default"
					v-if="this.task.status === '已完成'"
					disabled>
					<image 
						src="../assets/icons/complete.png" 
						class="icon_image_complete"></image>
				</button>
	
				<view>{{ this.task.taskName }}</view>
	
				<image v-for="(user, index) in this.task.users" :key="index" :src="outputBase64(user)"
					class="user_profiles"></image>
	
				<view class="task_status">{{ this.task.status }}</view>
			</view>
			<view v-for="(sonTask, index) in this.task.sons" :key="sonTask.taskId" class="son_task_container">
				<button class="finish_button"
					type="default"
					v-if="sonTask.status === '已完成'"
					disabled>
					<image
						src="../assets/icons/complete.png" 
						class="icon_image_complete"></image>
				</button>
	
				<view>{{ sonTask.taskName }}</view>
	
				<image v-for="(user, index) in sonTask.users" :key="index" :src="outputBase64(user)"
					class="user_profiles"></image>
	
				<view class="task_status">{{ sonTask.status }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			task: {
				type: Object,
				required: true
			},
			color: {
				type: String
			}
		},
		methods: {
			outputBase64(base64Url) {
				/// 获取到base64Data
				var base64Data = base64Url;
				/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
				base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
				/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
				const base64ImgUrl = "data:image/png;base64," + base64Data;
				/// 得到的base64ImgUrl直接给图片:src使用即可
				return base64ImgUrl;
			}
		}
	}
</script>

<style>
	.card {
		display: flex;
		padding: 15px;
		border-radius: 10px;
		margin: 20px;
		position: relative;
		flex-direction: column;
	}
	
	.task_container {
		display: flex;
		/* 使按钮和文本在同一行 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: flex-start;
		/* 水平靠左对齐 */
		width: 100%;
		/* 使子任务占满整行 */
	}
	
	.finish_button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin-right: 10px;
		margin-left: 0;
		margin-top: 2px;
		background: rgba(0, 0, 0, 0) !important;
	}
	
	.finish_button::after {
		border: none;
	}
	
	.icon_image_complete {
		/*在同样是256像素的情况下，complete图标比unhandled图标要稍微大一点，所以需要微调*/
		width: 17px;
		height: 17px;
		margin-left: 1px;
	}
	
	.user_profiles {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		margin-left: 5px;
	}
	
	.task_status {
		color: #666;
		position: absolute;
		right: 15px;
	}
	
	.son_task_container {
		display: flex;
		/* 使按钮和文本在同一行 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: flex-start;
		/* 水平靠左对齐 */
		margin-left: 20px;
		margin-top: 10px;
		width: 100%;
	}
</style>